<template>
  <div>
    <common-head title="确认订单"></common-head>

    <div class="con">
      <!-- 收货地址 -->
      <van-contact-card :type="cardType" :name="order.contact.name" :tel="order.contact.tel" @click="choseContact" />

      <!-- 订单商品 -->
      <div class="itesm">
        <van-card v-for="item in order.items" :num="item.num" :price="item.minPrice" :title="item.name"
          :thumb="item.pic" :key="item.id" />

        <!-- 支付 -->
        <van-submit-bar :price="order.price*100" button-text="提交订单" @submit="onSubmit" />
      </div>
    </div>
  </div>
</template>

<script>
import CommonHead from '@components/CommonHead'
import { mapState } from 'vuex'
export default {
  data () {
    return {
    
    }
  },
  components: {
    CommonHead
  },
  computed: {
    cardType(){
      if (this.order.contact.name) {
        // 说明有联系人
        return 'edit'
      } else {
        // 说明没有联系人
        return 'add'
      }
    },
    ...mapState({
      order: (state) => state.order.nowOrder
    })
  }, methods: {
    // 点击 去结算
    onSubmit () {
      console.log(this.order);
    },
    // 点击展开地址列表, 判断 cardType 是 add/edit
    choseContact () {
      if (this.cardType === 'add') {
        this.$router.push('/addContact')
      } else {
        this.$router.push('/addressLists')
      }
    }
  },
}
</script>

<style lang="scss" scoped>
</style>
